<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <!-- 主表单区域 -->
            <a-form :form="form" slot="detail">
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="备案证文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-upload v-decorator="['gonganwenjian', validatorRules.gonganwenjian]"
                                :trigger-change="true"></j-upload>
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :span="24" >
              <a-form-item label="入库状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['rukuzhaungtai']" placeholder="请输入入库状态" ></a-input>
              </a-form-item>
            </a-col> -->

                    <a-col :span="24">
                        <a-form-item label="货物名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-select mode="multiple"
                                v-decorator="['huaxuepinmingcheng',{rules:[{required:'true',message:'请选择货物名称!'}]}]"
                                @change="handleChange" placeholder="请选择货物名称">
                                <a-select-option v-for="items in this.select" :value="items"
                                    :key="items">
                                    {{ items }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :span="24">
              <a-form-item label="入库量(克)" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number v-decorator="['rukuliang', validatorRules.rukuliang]" placeholder="请输入入库量(克)"
                  style="width: 100%" />
              </a-form-item>
            </a-col> -->
                    <!-- <a-col :span="24">
              <a-form-item label="货物类别" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input  v-model="huaxuepinleibie"   placeholder="请输入货物类别"></a-input>
              </a-form-item>
            </a-col>
          
            <a-col :span="24">
              <a-form-item label="CAS号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input  v-model="cashao" placeholder="请输入CAS号"></a-input>
              </a-form-item>
            </a-col> -->
                    <a-col :span="24">
                        <a-form-item label="入库时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-date placeholder="请选择入库时间" date-format="YYYY-MM-DD HH:mm:ss"
                                v-decorator="['rukushijan', validatorRules.rukushijan]"
                                :trigger-change="true" :show-time="true" style="width: 100%" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="入库人员" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-select
                                v-decorator="['rukurenxingming', validatorRules.rukurenxingming]"
                                placeholder="请输入入库人姓名">
                                <a-select-option v-for="item in RenyuanList" :value="item"
                                    :key="item">{{ item }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :span="24">
              <a-form-item label="入库部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['rukurenbumen']" placeholder="请输入入库人部门"></a-input>
              </a-form-item>
            </a-col> -->

                    <!-- <a-col :span="24">
              <a-form-item label="回皮重量(克)" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number v-decorator="['huipizhongliang']" placeholder="请输入回皮重量(克)" style="width: 100%" />
              </a-form-item>
            </a-col> -->
                    <!-- <a-col :span="24">
              <a-form-item label="入库数(瓶)" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number v-decorator="['rukupingshu', validatorRules.rukupingshu]" @onchange="huoqupingshu(arr)"   placeholder="请输入入库瓶数"
                  style="width: 100%" />
              </a-form-item>
            </a-col> -->

                    <!-- <a-col :span="24">
              <a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select v-decorator="['cangkumingcheng',validatorRules.cangkumingcheng]" @change="handleChange1" placeholder="请输入仓库名称">
                  <a-select-option v-for="item in this.cangkuminghceng" :value="item">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
                    <!-- <a-col :span="24">
              <a-form-item label="仓库位置" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['cangkuweizhi', validatorRules.cangkuweizhi]" placeholder="请输入仓库位置"></a-input>
              </a-form-item>
            </a-col> -->
                    <a-col :span="24">
                        <a-form-item label="入场时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-date placeholder="请选择入场时间" date-format="YYYY-MM-DD HH:mm:ss"
                                v-decorator="['goumaishijian']" :show-time="true"
                                :trigger-change="true" style="width: 100%" />
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :span="24">
              <a-form-item label="购买厂家" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['goumaichangjia',validatorRules.goumaichangjia]" placeholder="请输入购买厂家"></a-input>
              </a-form-item>
            </a-col> -->
                    <!-- <a-col :span="24">
              <a-form-item label="司机姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['sijixingming',validatorRules.sijixingming]" placeholder="请输入司机姓名"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="车牌号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['chepaihao',validatorRules.chepaihao]" placeholder="请输入车牌号"></a-input>
              </a-form-item>
            </a-col> -->
                    <a-col :span="24">
                        <a-form-item label="签字" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-image-upload isMultiple v-decorator="['qianzi']"></j-image-upload>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="进入仓库拍照" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-image-upload isMultiple
                                v-decorator="['jinrucangkupaizhao']"></j-image-upload>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="称重拍照" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-image-upload isMultiple
                                v-decorator="['dakaiguimenpaizhao']"></j-image-upload>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="驳回原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['bohuiyuanyin']" placeholder="请输入驳回原因"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </j-form-container>
        <!-- 子表单区域 -->
        <a-tabs v-model="activeKey" @change="handleChangeTabs">
            <a-tab-pane tab="入库申请管理_子" :key="refKeys[0]" :forceRender="true">
                <j-editable-table :ref="refKeys[0]" :loading="yzdRukushenqingguanliZiTable.loading"
                    :columns="yzdRukushenqingguanliZiTable.columns"
                    :dataSource="yzdRukushenqingguanliZiTable.dataSource" :maxHeight="300"
                    :disabled="formDisabled" :rowNumber="true" :rowSelection="true"
                    :actionButton="true">

                    <template v-slot:action="props">
                        <div>
                            <a-select style="width: 195px" :default-value="props.value"
                                @change="(value)=> sethuojiahao(value,props)">
                                <a-select-option v-for="item in huojiahaolist" :value="item"
                                    :trigger-change="true" :key="item">
                                    {{ item }}
                                </a-select-option>
                            </a-select>
                        </div>
                    </template>

                    <template v-slot:action1="props">
                        <div>
                            <a-select style="width: 195px" :default-value="props.value"
                                @change="(value)=> sethuaxuepin(value,props)">
                                <a-select-option v-for="item in select" :value="item"
                                    :trigger-change="true" :key="item">
                                    {{ item }}
                                </a-select-option>
                            </a-select>
                        </div>
                    </template>

                    <template v-slot:action2="props">
                        <div>
                            <a-select style="width: 195px" :default-value="props.value"
                                @change="(value)=> setcangkumingcheng(value,props)">
                                <a-select-option v-for="item in cangkuminghceng" :value="item"
                                    :trigger-change="true" :key="item">
                                    {{ item }}
                                </a-select-option>
                            </a-select>
                        </div>
                    </template>
                    <template v-slot:action4="props">
                        <div>
                            <a-select style="width: 175px"
                                @change="(value)=> setdanwei(value,props)">
                                <a-select-option v-for="item in danwei" :value="item.value"
                                    :trigger-change="true" :key="item.value">
                                    {{ item.value }}
                                </a-select-option>
                            </a-select>
                            <!-- <j-dict-select-tag type="list" style="width: 175px"
                          @change="(value)=> setdanwei(value,props)" dictCode="danwei"
                          placeholder="请选择到货方式" /> -->
                        </div>
                    </template>
                </j-editable-table>
            </a-tab-pane>
        </a-tabs>
        <a-row v-if="showFlowSubmitButton"
            style="text-align: center;width: 100%;margin-top: 16px;"><a-button @click="handleOk">提
                交</a-button></a-row>
    </a-spin>
</template>
  
  <script>

import pick from 'lodash.pick'
import { getAction } from '@/api/manage'
import { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { validateDuplicateValue } from '@/utils/util'

export default {
    name: 'YzdShenqingguanliForm',
    mixins: [JEditableTableMixin],
    components: {
    },
    data() {
        return {
            RenyuanList: [],
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            labelCol2: {
                xs: { span: 24 },
                sm: { span: 3 },
            },
            wrapperCol2: {
                xs: { span: 24 },
                sm: { span: 20 },
            },
            // 新增时子表默认添加几行空数据
            addDefaultRowNum: this.pingshu,
            validatorRules: {
                sijixingming: {
                    rules: [
                        { required: true, message: '请输入司机姓名!' },
                    ]
                },
                goumaichangjia: {
                    rules: [
                        { required: true, message: '请输入购买厂家!' },
                    ]
                },
                chepaihao: {
                    rules: [
                        { required: true, message: '请输入车牌号!' },
                    ]
                },
                gonganwenjian: {
                    rules: [
                        { required: true, message: '请输入公安文件!' },
                    ]
                },
                // huaxuepinmingcheng: {
                //   rules: [
                //     { required: true, message: '请输入货物名称!' },
                //   ]
                // },
                rukushijan: {
                    rules: [
                        { required: true, message: '请输入入库时间!' },
                    ]
                },
                rukurenxingming: {
                    rules: [
                        { required: true, message: '请输入入库人姓名!' },
                    ]
                },
                // rukuliang: {
                //   rules: [
                //     { required: true, message: '请输入入库量(克)!' },
                //   ]
                // },
                rukupingshu: {
                    rules: [
                        { required: true, message: '请输入入库瓶数!' },
                    ]
                },
                // cangkumingcheng: {
                //   rules: [
                //     { required: true, message: '请输入仓库名称!' },
                //   ]
                // },
                cangkuweizhi: {
                    rules: [
                        { required: true, message: '请输入仓库位置!' }
                    ]
                }
            },
            refKeys: ['yzdRukushenqingguanliZi',],
            tableKeys: ['yzdRukushenqingguanliZi',],
            activeKey: 'yzdRukushenqingguanliZi',
            // 入库申请管理_子
            yzdRukushenqingguanliZiTable: {
                loading: false,
                dataSource: [],

                columns: [
                    {
                        title: '物料编码',
                        key: 'wuliaobianma',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '货物名称',
                        key: 'huaxuepinmingcheng',
                        type: FormTypes.slot,
                        slotName: 'action1',
                        width: "160px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },

                    {
                        title: '入库数量',
                        key: 'rukuzhongliang',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '单位',
                        key: 'danwei',
                        type: FormTypes.slot,
                        slotName: 'action4',
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '物料类别',
                        key: 'wuliaoleibie',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: 'PB号',
                        key: 'pbhao',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },

                ]
            },
            url: {
                huojihao: "/yzd_jichuxinxi/yzdZhucuncangkuxinxi/findhuojiahao",
                cangkumingcheng: "/yzd_jichuxinxi/yzdZhucuncangkuxinxi/huoQuCangKu",
                xialakuang: "/yzd_jichuxinxi/yzdWeixianfeiwuxinxi/list",
                add: "/yzd_rukuguanli/yzdShenqingguanli/add",
                danwei: "/sys/dict/getDictItems/danwei",
                edit: "/yzd_rukuguanli/yzdShenqingguanli/edit",
                queryById: "/yzd_rukuguanli/yzdShenqingguanli/queryById",
                yzdRukushenqingguanliZi: {
                    list: '/yzd_rukuguanli/yzdShenqingguanli/queryYzdRukushenqingguanliZiByMainId'
                },
                renyuanurl: "/menjin/menjinrenyuan/list"
            },
            // cashao:'',
            // huaxuepinleibie:'',
            // huaxuepinmingcheng:'',
            select: [],
            cangkuminghceng: [],
            pingshu: '',
            danwei: [],
            huojiahaolist: [],
        }
    },
    props: {
        //流程表单data
        formData: {
            type: Object,
            default: () => { },
            required: false
        },
        //表单模式：false流程表单 true普通表单
        formBpm: {
            type: Boolean,
            default: false,
            required: false
        },
        //表单禁用
        disabled: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    computed: {
        formDisabled() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return false
                }
                return true
            }
            return this.disabled
        },
        showFlowSubmitButton() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return true
                }
            }
            return false
        }
    },
    created() {
        //如果是流程中表单，则需要加载流程表单data
        this.showFlowData();
        this.getselect();
        this.getCangkumingcheng()
        this.huojiahaolist = []
        this.getrenyuan();
        this.getdanwei();
    },
    methods: {
        getdanwei() {
            getAction(this.url.danwei).then(res => {
                this.danwei = res.result;
            })
        },
        getrenyuan() {
            getAction(this.url.renyuanurl).then(res => {
                console.log(res);
                res.result.records.forEach(element => {
                    this.RenyuanList.push(element.name);

                })
            })

        },
        setcangkumingcheng(arr, row) {
            this.huojiahaolist = [];
            var re = {
                "cangkumingcheng": arr
            }
            getAction(this.url.huojihao, re).then((res) => {
                res.result.forEach(element => {
                    this.huojiahaolist.push(element.huojiahao)
                })
            })

            // this.yzdRukushenqingguanliZiTable.dataSource[row.index]=arr
            this.$refs.yzdRukushenqingguanliZi.setValues([{
                'rowKey': row.rowId, values: {
                    'cangkumingcheng': arr
                }
            }]);
        },
        setdanwei(value, props) {
            this.$refs.yzdRukushenqingguanliZi.setValues([{
                'rowKey': props.rowId, values: {
                    'danwei': value
                }
            }]);
        },
        sethuaxuepin(arr, row) {

            this.$refs.yzdRukushenqingguanliZi.setValues([{
                'rowKey': row.rowId, values: {
                    'huaxuepinmingcheng': arr
                }
            }]);
        },

        sethuojiahao(arr, row) {


            this.$refs.yzdRukushenqingguanliZi.setValues([{
                'rowKey': row.rowId, values: {
                    'huojiahao': arr
                }
            }]);
        },

        huoqupingshu(arr) {

            this.pingshu = arr
        },


        getCangkumingcheng() {


            getAction(this.url.cangkumingcheng).then((res) => {

                res.result.forEach(element => {

                    this.cangkuminghceng.push(element.cangkumingcehng)
                });
            })
        },

        getselect() {

            getAction(this.url.xialakuang).then((res) => {
                res.result.records.forEach(element => {
                    this.select.push(element.huaxuepinmingcheng)
                });

            })

        },
        addBefore() {

            this.form.resetFields()
            this.yzdRukushenqingguanliZiTable.dataSource = []
        },
        getAllTable() {

            let values = this.tableKeys.map(key => getRefPromise(this, key))
            return Promise.all(values)
        },
        /** 调用完edit()方法之后会自动调用此方法 */
        editAfter() {

            let fieldval = pick(this.model, 'gonganwenjian', 'rukuzhaungtai', 'huaxuepinleibie', 'huaxuepinmingcheng', 'cashao', 'rukushijan', 'rukurenxingming', 'rukurenbumen', 'rukuliang', 'huipizhongliang', 'rukupingshu', 'cangkumingcheng', 'goumaishijian', 'goumaichangjia', 'sijixingming', 'chepaihao', 'jinrucangkupaizhao', 'dakaiguimenpaizhao', 'bohuiyuanyin', 'cangkuweizhi', 'zhongliang')
            this.huaxuepinleibie = fieldval.huaxuepinleibie
            this.cashao = fieldval.cashao
            this.handleChange1(fieldval.cangkumingcheng);

            this.$nextTick(() => {
                this.form.setFieldsValue(fieldval)
            })
            // 加载子表数据
            if (this.model.id) {
                let params = { id: this.model.id }

                this.requestSubTableData(this.url.yzdRukushenqingguanliZi.list, params, this.yzdRukushenqingguanliZiTable)
            }
        },
        /** 整理成formData */
        classifyIntoFormData(allValues) {

            allValues.formValue.huaxuepinmingcheng = allValues.formValue.huaxuepinmingcheng.toString()

            let main = Object.assign(this.model, allValues.formValue)
            return {
                ...main, // 展开
                yzdRukushenqingguanliZiList: allValues.tablesValue[0].values,
            }
        },
        //渲染流程表单数据
        showFlowData() {

            if (this.formBpm === true) {
                let params = { id: this.formData.dataId };
                getAction(this.url.queryById, params).then((res) => {
                    if (res.success) {

                        this.edit(res.result);
                    }
                })
            }
        },
        validateError(msg) {
            this.$message.error(msg)
        },

        popupCallback(row) {

            this.form.setFieldsValue(pick(row, 'gonganwenjian', 'rukuzhaungtai', 'huaxuepinleibie', 'huaxuepinmingcheng', 'cashao', 'rukushijan', 'rukurenxingming', 'rukurenbumen', 'rukuliang', 'huipizhongliang', 'rukupingshu', 'cangkumingcheng', 'goumaishijian', 'goumaichangjia', 'sijixingming', 'chepaihao', 'jinrucangkupaizhao', 'dakaiguimenpaizhao', 'bohuiyuanyin', 'cangkuweizhi', 'zhongliang'))
        },

        handleChange(value) {

            // this.huaxuepinmingcheng 
        },




        handleChange1(aa) {
            this.huojiahaolist = [];
            var re = {
                "cangkumingcheng": aa
            }
            getAction(this.url.huojihao, re).then((res) => {
                res.result.forEach(element => {
                    this.huojiahaolist.push(element.huojiahao)
                })
            })
        }


    }
}
  </script>
  
  <style scoped></style>
  
  